<template>
    <div class = "companyBox" v-if="isDisabled">
        <div class="companyBoxContent">
            <a-tabs type="card" @change="onChange">
                <a-tab-pane key="1" tab="基本信息">
                    <basicInfo :isHide="isHide" ref="basicInfo" :company="company"></basicInfo>
                </a-tab-pane>
              <template v-if="isHide">
                <a-tab-pane key="2" tab="废气监测点" v-if="isShowList[0]">
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="1" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="3" tab="废水监测点" v-if="isShowList[1]">
                  <monitoringPoint :isHide="isHide" :companyId="company.id" :areaId="company.areaId" :equipmentType="2" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="4" tab="水站监测点" v-if="isShowList[2]">
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="3" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="5" tab="空气站监测点" v-if="isShowList[3]">
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="4" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
              </template>
              <template v-else>

                <a-tab-pane key="2" tab="废气监测点" >
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="1" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="3" tab="废水监测点" >
                  <monitoringPoint :isHide="isHide" :companyId="company.id" :areaId="company.areaId" :equipmentType="2" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="4" tab="水站监测点">
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="3" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
                <a-tab-pane key="5" tab="空气站监测点" >
                  <monitoringPoint :isHide="isHide"  :companyId="company.id" :areaId="company.areaId" :equipmentType="4" ref="monitoringPoint"></monitoringPoint>
                </a-tab-pane>
              </template>
            </a-tabs>
            <div class="title">
                <h3>{{company.companyName}}</h3>
                <a-icon @click="onClose" class="close_click" type="close" />
            </div>
        </div>

    </div>
</template>

<script>
    import monitoringPoint from '@/views/components/company-monitoring-point/monitoringPoint'
    import basicInfo from "@/views/components/company-monitoring-point/basicInfo";
    import eventBush from "@/eventBush";
    export default {
        components:{
            monitoringPoint,
            basicInfo
        },
        props: {
            equipmentType:{
                type: Array,
                required: true
            },
            isDisabled: {
                type: Boolean,
                required: true,
                default: false
            },
            company:{
                type: Object,
                required: true
            },
            isHide: {
              type: Boolean,
              required: false,
              default: true
            },
        },
        data(){
            return {
                isShowList:[false,false,false,false],
            }
        },
        name: "company-monitoring-point",
        methods:{
            onChange(key){
                console.log(key)
              console.log(this.company)
                if(key==2){
                    this.$nextTick(()=>{
                        this.$refs.monitoringPoint.getMonitoringPointList();
                        this.$forceUpdate()
                    })

                }
              if(key==3){
                this.$nextTick(()=>{
                  this.$refs.monitoringPoint.getMonitoringPointList();
                  this.$forceUpdate()
                })

              }
                if(key==4){
                  this.$nextTick(()=>{
                    this.$refs.monitoringPoint.getMonitoringPointList();
                    this.$forceUpdate()
                  })

                }
                if(key==5){
                  this.$nextTick(()=>{
                    this.$refs.monitoringPoint.getMonitoringPointList();
                    this.$forceUpdate()
                  })

                }
            },
            onClose(){
                eventBush.$emit('onDisabledData',!this.isDisabled)
            },
            setEquipmentType(){
                this.isShowList.forEach(item=>{
                    item=false;
                })
                this.equipmentType.forEach(item=>{
                    this.isShowList[item-1]=true;
                })
            },
        },
        watch:{
            company:function(val, oldVal){
                if(Object.keys(val).length!==0){
                    console.log(val)
                    this.$nextTick(()=>{
                        console.log(this.$refs.basicInfo)
                        this.$refs.basicInfo.getCompanyInfo();
                    })

                }
            },
            equipmentType: {
                deep: true,
                handler: function() {
                    this.setEquipmentType()
                }
            }

        }
    }
</script>

<style scoped lang = "scss">
    .title{
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 102;
        display: flex;
    }
    .title .close_click{
        margin-left: 20px;
        margin-top: 5px;
    }
    .companyBox {
        background-color: #fff;
        position: absolute;
        padding: 20px;
        bottom: 0;
        left: 0;
        right: 0;
        top: 82px;
        z-index: 100;
      box-shadow: 0 0 20px 0 #000;
    }

    .companyBoxContent{
       width: 100%;
        height: 100%;
        position: relative;
    }

    ::v-deep .ant-tabs-bar{
        margin: 0;
    }
    ::v-deep .ant-tabs .ant-tabs-top-content {
        width: 100%;
        border: 1px solid #e8e8e8;
        border-top: hidden;
    }
</style>
